<!--常用语设置组件-->
<template>
  <div class="commonWords">
    <div class="tips">
      <img src="../../../assets/img/icon/tip.png" alt />
      <span>常用语个数最多添加15条
      </span>
    </div>
    <div class="commonWords-list">
      <transition-group tag="div" id="doing" class="item-ul">
        <div v-for="(item, i) in commonWordsData" class="drag-list" :key="item.id">
          <!-- <div class="drag-list-content">
            
          </div> -->
          <p class="drag-list-title text-nobr">{{item.content}}</p>
          <p class="drag-list-editDel" v-if="i>=5">
            <img class="up" src="../../../assets/img/icon/up.png" alt @click.stop="toMoveUp(item)" title="上移"
              v-if="i>=6" />
            <img class="down" src="../../../assets/img/icon/down.png" @click.stop="toMoveDown(item)" alt title="下移" />
            <el-button type="text" size="small" class="edit" @click.stop="Edit(item)">编辑</el-button>
            <el-button type="text" size="small" class="delete" @click="Delete(item,i)">删除</el-button>
          </p>
        </div>
      </transition-group>

      <div class="addBox" v-show="isShow">
        <div class="drag-list addCommonWordsContainer">
          <p class="tips-p">请不要填写手机、QQ、微信等联系方式或广告信息，否则系统将封禁您的账号!</p>
          <p class="add-p">
            <img src="../../../assets/img/icon/add.png" @click="AddCommonWords" alt />
            <span @click="AddCommonWords">{{commonWordsText}}</span>
          </p>
        </div>
        <el-collapse-transition>
          <div class="textareaContainer" v-show="isShowTextarea">
            <el-form :model="commonWords" :rules="commonWordsRules" ref="commonWords">
              <el-form-item prop="content">
                <el-input type="textarea" :maxlength="200" v-model="commonWords.content" :rows="4" style="width:100%;"
                  placeholder="请输入内容">
                </el-input>
              </el-form-item>
              <el-form-item class="commonWords-btn">
                <span class="num">{{num}}<b>/</b>200</span>
                <div class="commonWords-btn-right">
                  <el-button size="small" @click="toCancel">取消</el-button>
                  <el-button type="primary" size="small" @click="toSave">保存</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
      </div>
    </div>
  </div>

</template>
<script>
import { commonWordsList, commonWordsSave, commonWordsUpdate, deleteById, moveUp, moveDown } from '../../../api/account.js';
export default ({
  name: 'commonWords',
  data () {
    return {
      // 常用语数据
      commonWordsData: [
        // {
        //   id: 0,
        //   content: '对不起，我觉得该职位不太适合我，祝您早日找到满意的工作人选',
        //   isEdit: false,
        //   editText: '编辑'
        // },
        // {
        //   id: 1,
        //   content: '我可以去贵公司面试吗?',
        //   isEdit: false,
        //   editText: '编辑'
        // },
        // {
        //   id: 2,
        //   content: '我可以把我的简历发给您看看吗?',
        //   isEdit: false,
        //   editText: '编辑'
        // },
        // {
        //   id: 3,
        //   content: '我可以去贵公司面试吗?',
        //   isEdit: false,
        //   editText: '编辑'
        // },
        // {
        //   id: 4,
        //   content: '我可以把我的简历发给您看看吗?',
        //   isEdit: false,
        //   editText: '编辑'
        // },
        // {
        //   id: 5,
        //   content: '对不起，我觉得该职位不太适合我，祝您早日找到满意的工作人选?',
        //   isEdit: false,
        //   editText: '编辑'
        // },
        // {
        //   id: 6,
        //   content: '我可以把我的简历发给您看看吗?',
        //   isEdit: false,
        //   editText: '编辑'
        // },
      ],
      // 控制文本域的变量
      isShowTextarea: false,
      // 控制文本域容器的变量
      isShow: false,
      // 常用语表单
      commonWords: {
        content: '',
        id: ''
      },
      // 添加常用语提示语
      commonWordsText: '添加常用语',
      commonWordsRules: {}
    }
  },
  computed: {
    num () {
      return this.commonWords.content.length;
    }
  },
  mounted () {
    // 初始化加载常用语列表
    this.getCommonWordsList();
  },
  methods: {
    // 获取常用语列表
    getCommonWordsList () {
      commonWordsList().then(res => {
        if (res.success) {
          // 判断数据为null 或者长度小于14
          if ((res.data && res.data.length <= 14) || (!res.data)) {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          this.commonWordsData = res.data;
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 编辑常用语
    Edit (item) {
      this.isShow = true;
      this.isShowTextarea = true;
      this.commonWords.content = item.content;
      this.commonWords.id = item.id;
      this.commonWordsText = '编辑常用语';
    },
    // 保存编辑常用语
    EditMethod (id) {
      let query = {
        id: this.commonWords.id,
        content: this.commonWords.content
      }
      // 编辑接口
      commonWordsUpdate(query).then(res => {
        if (res.success) {
          this.$message.success('常用语编辑成功!')
          // 刷新常用语列表
          this.getCommonWordsList()
          // 判断常用语数据超过15条编辑后也不展示下面的文本域容器
          if (this.commonWordsData.length <= 14) {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          this.commonWordsText = '添加常用语';
          this.isShowTextarea = false;
          // 将内容清空
          this.commonWords.content = '';
          // 将id清空
          this.commonWords.id = '';
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 删除常用语
    Delete (item, i) {
      this.$confirm('将删除选中的常用语, 是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(item.id).then(res => {
          if (res.success) {
            this.$message.success('常用语删除成功!');
            // 刷新常用语列表
            this.getCommonWordsList()
          } else {
            this.$message.error(`${res.msg}`)
          }
        })
      }).catch((error) => {
        console.log('error')
      })
    },
    // 上移
    toMoveUp (item) {
      // 获取列表第一条数据sort
      let firstSort = this.commonWordsData[0].sort;
      moveUp(item.id).then(res => {
        if (res.success) {
          if (item.sort == firstSort) {
            this.$message.error('已到顶部');
          } else {
            this.$message.success('上移常用语成功!');
          }
          // 刷新常用语列表
          this.getCommonWordsList()
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 下移
    toMoveDown (item) {
      // 获取最后一条数据的sort
      let lastSort = this.commonWordsData[this.commonWordsData.length - 1].sort;
      moveDown(item.id).then(res => {
        if (res.success) {
          if (item.sort == lastSort) {
            this.$message.error('已至底部');
          } else {
            this.$message.success('下移常用语成功!');
          }
          // 刷新常用语列表
          this.getCommonWordsList()
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    // 点击添加/编辑常用语
    AddCommonWords () {
      this.isShowTextarea = !this.isShowTextarea;
      if (this.commonWords.id == '') {
        this.commonWordsText = '添加常用语';
        if (!this.isShowTextarea) this.commonWords.content = '';
      }

    },
    // 取消常用语
    toCancel () {
      this.isShowTextarea = false;
      if (this.commonWords.id == '') {
        this.commonWords.content = '';
      }

    },
    // 保存常用语
    toSave () {
      if (this.commonWords.content == '') {
        this.$message.error('请输入常用语')
        return false;
      }
      this.commonWords.id ? this.EditMethod(this.commonWords.id) : this.SaveMethod()
    },
    // 保存常用语
    SaveMethod () {
      let query = {
        content: this.commonWords.content
      }
      commonWordsSave(query).then(res => {
        if (res.success) {
          this.$message.success('常用语添加成功!')
          // 刷新常用语列表
          this.getCommonWordsList()
          this.isShowTextarea = false;
          this.commonWords.content = '';
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    }
  }
})
</script>
<style scoped>
.commonWords {
    /* border: 1px solid red; */
}
.commonWords .tips {
    background-color: #f9f4f2;
    height: 30px;
}
.commonWords .tips img {
    width: 15px;
    height: 15px;
    cursor: pointer;
    vertical-align: text-top;
}
.commonWords .tips span {
    font-size: 12px;
    color: #757575;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    margin-left: 9px;
}
.commonWords-list {
    /* padding-top: 3px; */
}
.drag-list {
    color: #414a60;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    display: flex;
    -webkit-transition: border 0.3s ease-in;
    transition: border 0.3s ease-in;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    padding-left: 15px;
}
.drag-list::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 100%;
    background-color: #dedfe5;
    background-color: #0093ff;
}
.drag-list .drag-list-title {
    flex: 1;
}
.addBox .drag-list::before {
    content: none;
}
.drag-list .drag-list-title {
    width: 78%;
}
.drag-list-editDel {
    width: 22%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.drag-list-editDel .el-button {
    width: 48px;
    height: 22px;
    line-height: 5px;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    color: #0093ff;
}
.drag-list-editDel .edit {
    /* margin-right: 8px; */
    margin-left: 10px;
}
.drag-list-editDel .delete {
    color: #fd4e40;
    border: 1px solid rgba(253, 78, 64, 1);
    opacity: 1;
    border-radius: 2px;
}
.drag-list-editDel img {
    width: 16px;
    height: 16px;
    /* margin-top: 19px; */
    cursor: pointer;
    vertical-align: text-bottom;
}
.drag-list-editDel .down {
    margin-left: 10px;
}
.drag-list:hover {
    /* border: 1px solid #20a0ff; */
}
.item-ul {
    /* padding: 0 8px 8px; */
    padding: 0 8px;
    /* max-height: 600px; */
    overflow-y: scroll;
}
.item-ul::-webkit-scrollbar {
    width: 0;
}
.ghost-style {
    display: block;
    color: transparent;
    border-style: dashed;
}
/*添加常用语样式*/
.addCommonWordsContainer {
    height: 52px;
    display: flex;
    justify-content: space-between;
    cursor: default;
    border-bottom: none;
}
.addCommonWordsContainer p {
    width: 22%;
    text-align: right;
    padding-right: 2%;
    font-size: 14px;
}
.addCommonWordsContainer .tips-p {
    color: #757575;
    flex: 1;
    text-align: left;
}
.addCommonWordsContainer .tips-p::before {
    content: '*';
    color: #fd4e40;
    margin-right: 4px;
    vertical-align: sub;
}
.addCommonWordsContainer .add-p {
    color: #0093ff;
}
.addCommonWordsContainer .add-p img {
    width: 13px;
    height: 13px;
    cursor: pointer;
    vertical-align: text-bottom;
}
.addCommonWordsContainer .add-p span {
    height: 14px;
    line-height: 100%;
    color: #0093ff;
    margin-left: 16px;
    cursor: pointer;
}
.textareaContainer .el-form {
    margin-top: 0;
}
.textareaContainer .el-form .el-form-item {
    width: auto;
}
.textareaContainer /deep/.el-textarea__inner {
    height: 100%;
    height: 114px;
    background-color: #f8f8f8;
}
.textareaContainer /deep/.el-textarea .el-input__count {
    background-color: #f8f8f8;
}
.commonWords-btn {
    height: 57px;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
}
.commonWords-btn .num {
    width: 37px;
    height: 15px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 16px;
    color: #757575;
}
.commonWords-btn .commonWords-btn-right {
    display: inline-block;
    position: absolute;
    right: 0;
}
.commonWords-btn .el-button {
    width: 94px;
    height: 24px;
    border: 1px solid #0093ff;
}
.commonWords-btn /deep/.el-button--small,
.el-button--small.is-round {
    padding: 5px 15px;
}
.commonWords-btn .el-button:nth-child(2) {
    margin-left: 16px;
}
</style>